// 虚拟进度条
import router, { asyncRoutes } from '@/router'
console.log(asyncRoutes) // 8个路由规则
import store from '@/store'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3 // 初始化时的最小百分比
})

// 白名单页面 ( 不需要登录就可以看到的页面 )
// 比喻 登录 注册 404页面等等
// 声明一个数组接收
// const whileList = ['/login', '/register', '/404']
const whileList = ['/login']
// 虚拟进度条 -- nprogress -- 去看他的网站，或者去百度搜索 nprogress的 vue使用场景
router.beforeEach(async(to, from, next) => {
  // 前置路由守卫
  // console.log('前置守卫', to, from)
  NProgress.start()
  // next()
  // 路由守卫这个通过是否有token来判断用户登录过没有
  // 再次进行判断,如果用户是从登录页面进来,则不需要再去登录页面
  if (store.state.user.token) {
    // 用户已经登录过了
    // if (to.path === '/login' || to.path === '/404') {
    if (whileList.includes(to.path)) {
      next('/') // 如果用户还想访问login登录界面，那么就给他用next强行跳转回首页
      NProgress.done()
    } else {
      // 核心代码放在这个if分支里面: 用户登录过 然后发获取用户信息的请求 但是 我们通过vue钟的actions进行发送 所以 这个只需要导入
      if (!store.state.user.userInfo.userId) {
        // 如果某个值已经存在了 就不要在发请求了 这样解决内存
        const res = await store.dispatch('user/setInfoActions')
        console.log(res) // 打印的是可以访问的页面权限信息的集合
        // menus 当前登录用户 个人所具有的页面权限
        const { menus } = res.roles
        console.log('当前用户页面权限', menus) // 当前用户页面权限

        // 结合后端返回的数据,筛选我们当前用户具有的权限页面 asyncRoutes这个是我们单独分离出来的路由规则
        const filterRoutes = asyncRoutes.filter(item => {
          console.log(item)
          return menus.includes(item.children[0].name)
        })
        console.log(filterRoutes) // 返回的是当前用户的页面权限 我们将这个这个路由规则 保存到vuex中
        // 3.1 访问不存在的页面，不会去404
        // 路由规则里面，有一个*的全匹配的路由，位置没有写好。*号路由应该放在所有路由规则的最后面，作均兜底的匹配规则
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        // 为了侧边栏 菜单的动态展示，需要使用vuex  将所有的路由规则保存到vuex里面
        store.commit('user/setRoutes', filterRoutes)
        // 所以在这里 添加动态路由
        router.addRoutes(filterRoutes)
        // 3.2 动态路由的页面，刷新以后会白屏
        // 是vue-router自己的缺陷，需要动态添加路由以后，在使用next跳转路由的时候，手动在指定以下 to.path路径
        next(to.path)
      }
      next() // 如果用户去的是非登录页面，直接放行
    }
  } else {
    // 若用户没有登录过 没有token
    if (whileList.includes(to.path)) {
      next() // 去访问需要登录之后才能看的页面，我就强行给你退回到登录页面
    } else {
      next('/login') // 去访问普通的登录页面，就直接放行，让你过去
    }
  }
})

router.afterEach(() => {
  // 后置守卫
  // console.log('后置守卫')
  NProgress.done()
})

